<template>
    <div class="box6">
        <div class="title">
            <p>热门景区排行</p>
            <img src="../../images/dataScreen-title.png" alt="">
        </div>
        <div class="charts" ref=charts></div>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
//引入echarts
import * as echarts from 'echarts';
let charts = ref();
//组件挂载完毕初始化图形图标
onMounted(() => {
    let mychart = echarts.init(charts.value);
    //设置配置项
    let ranking1 = ``;
    let ranking2 = ``
    let ranking3 = ``
    let xdata = {
        value: ['埇桥区', '砀山县', '萧县', '灵璧县', '蚌埠', '合肥']
    };
    let sdata = {
        value: [10, 20, 30, 40, 13, 56]
    },

        option = {
            tooltip: {
                trigger: 'axis',
            },
            grid: {
                containLabel: true,
                bottom: '5%',
                left: '5%',
                top: '10%',
                right: '5%',
            },
            xAxis: {
                type: 'value',
                axisLabel: {
                    show: false
                },
                axisLine: {
                    show: false,
                },
                axisTick: {
                    show: false,
                },
                splitLine: {
                    show: false,
                },
            },
            yAxis: [
                {
                    type: 'category',
                    data: xdata.value,
                    inverse: true,
                    axisLabel: {
                        fontSize: '18px',
                        inside: false,
                        verticalAlign: 'center',
                        padding: [5, 0, 0, 0],
                        margin: 20,       //刻度标签与轴线之间的距离
                        formatter: function (value: any, index: any) {
                            if (index < 3) {
                                return `{img${index}|} {a|${value}}`
                            }
                            else {
                                return `{b|${index + 1}}{a|${value}}`
                            }

                        },
                        rich: {
                            a: {
                                fontSize: '14px',
                                color: '#fff',
                                fontFamily: 'SourceHanSansCN-Regular',
                                padding: [4, 0, 0, 15],
                                width: 50,

                            },
                            b: {
                                fontSize: '18px',
                                fontFamily: 'Barlow Condensed SemiBold',
                                color: '#8891B0',
                                padding: [4, 15, 0, 15],
                            },
                            img0: {
                                width: 34,
                                height: 24,
                                backgroundColor: {
                                    image: ranking1,
                                },
                            },
                            img1: {
                                width: 34,
                                height: 24,
                                backgroundColor: {
                                    image: ranking2,
                                },
                            },
                            img2: {
                                width: 34,
                                height: 24,
                                backgroundColor: {
                                    image: ranking3,
                                },
                            },
                        },
                    },
                    axisLine: {
                        show: false,
                    },
                    axisTick: {
                        show: false,
                    },
                    splitLine: {
                        show: false,
                        lineStyle: {
                            color: '#13387a',
                        },
                    },
                },

                {
                    type: 'category',
                    data: xdata.value,
                    inverse: true,
                    axisLabel: {
                        inside: false,
                        verticalAlign: 'center',
                        padding: [5, 0, 0, 0],
                        margin: 20,       //刻度标签与轴线之间的距离
                        formatter: function (value: any, index: any) {
                            return `{a|${sdata.value[index]}w}`
                        },
                        rich: {
                            a: {
                                fontSize: 18,
                                fontFamily: 'Barlow Condensed SemiBold',
                                color: '#fff',
                                padding: [4, 0, 0, 0],
                            },
                        },
                    },
                    axisLine: {
                        show: false,
                    },
                    axisTick: {
                        show: false,
                    },
                    splitLine: {
                        show: false,
                        lineStyle: {
                            color: '#13387a',
                        },
                    },
                }
            ],
            series: [
                {
                    data: sdata.value,
                    type: 'bar',
                    barWidth: 10,
                    showBackground: true,
                    backgroundStyle: {
                        color: '#F5F5F5',
                        borderRadius: 5,
                    },
                    itemStyle: {
                        borderRadius: 40,
                        color: '#307eff',

                    },
                }
            ]
        }

    mychart.setOption(option);
});
</script>
<style scoped lang="scss">
.box6 {
    width: calc(100% - 10px);
    height: 100%;
    background: url(../../images/dataScreen-main-lb.png) no-repeat;
    background-size: 100% 100%;
    margin-top: 10px;

    .title {
        margin-left: 20px;
        color: white;
        font-size: 20px;
    }

    .charts {
        height: calc(100% - 40px);
    }
}
</style>